<!--
  * 严肃声明：
  * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
  * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
  * Copyright (c) 2022 APThink David唐 all rights reserved.
  * 版权所有，侵权必究！
  *
 -->
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { type ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
import en from 'element-plus/es/locale/lang/en.mjs'
import ApthinkHeader from '@/components/ApthinkHeader.vue'
import ApthinkFooter from '@/components/ApthinkFooter.vue'
import ApthinkNavbar from '@/components/ApthinkNavbar.vue'
import { getToken } from '@/utils'
import log from 'loglevel'
import { appStore } from './stores/app'

const app = appStore()
const asideWidth = computed(() => (app.isMenuCollapse ? '80px' : '200px'))
const zIndex = ref(3000)
const locale = computed(() => (app.currentLanguage === 'zh' ? zhCn : en))

onMounted(() => {
  if (getToken()) {
    log.debug('have token')
  }
})

window.addEventListener('resize', () => {
  const w = document.documentElement.clientWidth
  if (w > 800) app.isMenuCollapse = false
  else app.isMenuCollapse = true
})
</script>

<template>
  <el-container>
    <el-aside :width="asideWidth">
      <apthink-navbar />
    </el-aside>
    <el-container>
      <el-header>
        <apthink-header />
      </el-header>
      <el-main>
        <el-config-provider size="small" :z-index="zIndex" :locale="locale">
          <RouterView />
        </el-config-provider>
      </el-main>
      <el-footer>
        <apthink-footer />
      </el-footer>
    </el-container>
  </el-container>
</template>

<style scoped></style>
